<!-- 手术跟台采购需求单-详情-->
<template>
  <div class="purchasing-purchase-operation-detail">
    <el-container class="registercard-box">
      <!-- 待确认,已取消,待确认,已拒绝 -->
      <RecordInfo
        :record-form="headerConfirmedColumns"
        :record-data="topData" />

      <h3>收货明细</h3>
      <div
        v-for="(item,index) in orderDeliveryData"
        :key=index>
        <RecordZoomCard
          :card-data="item.pageBean.content"
          :need-title="true"
          :card-columns="cardConfirmedColumns"
          :show-list="true"
          :dialog-default-url="dialogDefaultUrl"
          :dialogcolumns='dialogColumns'
          :dialogdetails='dialogdetails'
          :base-info='DeliverGoodsBaseInfo[index]'
          :card-son-columns='cardSonConfirmedColumns'
          :row-title='rowTitle'
        >
          <template
            slot="baseInfo"
            slot-scope="scope">
            <div>
              <el-form
                :inline="true"
                label-width="155px"
              >
                <el-form-item
                  v-for="item in DeliverGoodsTitle"
                  :key='item.key'
                  :label='item.label'
                  :class="{'price':item.key==='sumPrice'}">
                  {{ scope.baseInfo[item.key] }}
                </el-form-item>
              </el-form>
            </div>
          </template>
        </RecordZoomCard>
        <el-pagination
          class="pagination"
          @size-change="reciveHandleSizeChange"
          @current-change="reciveHandleCurrentChange"
          :current-page="reacivePageList.curPage"
          :page-sizes="reacivePageList.PAGE_NUMBER"
          :page-size="reacivePageList.pageSize"
          :layout="reacivePageList.PAGINATION_LAYOUT"
          :total="reacivePageList.totalElements"
        />
      </div>
      <h3>退回明细</h3>
      <RecordZoomCard
        :card-data="returnData"
        :need-title="true"
        :card-columns="cardPartialCollectionColumns"
        :show-list="true"
        :dialog-default-url="dialogDefaultUrl"
        :dialogcolumns='dialogColumns'
        :dialogdetails='dialogdetails'
        :base-info='ReturnBaseInfo.length?ReturnBaseInfo[0]:{}'
        :card-son-columns='cardSonConfirmedColumns'
        :row-title='returnRowTitle'
      >
        <template
          slot="baseInfo"
          slot-scope="scope">
          <div>
            <el-form
              :inline="true"
              label-width="155px"
            >
              <el-form-item
                v-for="item in ReturnTitle"
                :key='item.key'
                :label='item.label'
                :class="{'price':item.key==='operateReturnAmount'}">
                {{ scope.baseInfo[item.key] }}
              </el-form-item>
            </el-form>
          </div>
        </template>
      </RecordZoomCard>
      <el-pagination
        class="pagination"
        @size-change="returnHandleSizeChange"
        @current-change="returnHandleCurrentChange"
        :current-page="returnPageList.curPage"
        :page-sizes="returnPageList.PAGE_NUMBER"
        :page-size="returnPageList.pageSize"
        :layout="returnPageList.PAGINATION_LAYOUT"
        :total="returnPageList.totalElements"
      />
    </el-container>
  </div>
</template>

<script>
import {
  followOrderDetail,
  orderDeliveryDetail,
  ocBsOperateItemList,
  returnOneInfo
} from '@const/beforeSettleApi'
import RecordZoomCard from '@/moduleComponents/beforeSettle/distributorSide/purchasingManagement/accompaniedbygoods'
import RecordInfo from '@/moduleComponents/common/detail/recordInfo'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common'
import paginationMixin from '@mixins/paginationMixin'
import ElEditable from '@components/el-editable'
import { formatDate, getFormatterPrice } from '@const/filter.js'
import { hasIn } from 'lodash'
import {
  headerConfirmedColumns,
  cardConfirmedColumns,
  dialogColumns,
  dialogdetails,
  DeliverGoodsTitle,
  ReturnTitle,
  cardPartialCollectionColumns,
  cardSonConfirmedColumns,
  ORDER_STATUS
} from './const'
export default {
  mixins: [paginationMixin],
  data () {
    return {
      dialogDefaultUrl: {
        url: ``,
        method: '',
        params: {}
      },
      reacivePageList: {
        curPage: 1, // 当前页
        PAGE_NUMBER, // 页码数组
        PAGINATION_LAYOUT, // 页码功能布局
        pageSize: PAGE_NUMBER[0], // 一页的数量
        totalElements: 0
      },
      returnPageList: {
        curPage: 1, // 当前页
        PAGE_NUMBER, // 页码数组
        PAGINATION_LAYOUT, // 页码功能布局
        pageSize: PAGE_NUMBER[0], // 一页的数量
        totalElements: 0
      },
      cardSonConfirmedColumns,
      flowOrderDialog: false,
      headerConfirmedColumns,
      cardConfirmedColumns,
      cardPartialCollectionColumns,
      dialogColumns,
      dialogdetails,
      DeliverGoodsTitle,
      orderDeliveryData: [],
      ReturnTitle,
      page: {
        PAGE_NUMBER,
        PAGINATION_LAYOUT
      },
      deliveryLoading: false,
      dialogPopupVisible: false,
      DeliverGoodsBaseInfo: [],
      ReturnBaseInfo: {},
      tableLoading: false,
      topData: {},
      returnDataInfo: [],
      returnLoading: false,
      returnData: [],
      ORDER_STATUS,
      rowTitle: 'distributorList',
      returnRowTitle: 'detailVOS',
      // 分页配置信息
      curPage: 1,
      PAGE_NUMBER,
      PAGINATION_LAYOUT,
      pageSize: PAGE_NUMBER[0],
      totalElements: 0
    }
  },
  components: {
    RecordZoomCard,
    RecordInfo,
    ElEditable
  },
  filters: {
    getFormatterPrice
  },
  computed: {
    id () {
      return this.$route.query.id
    }
  },
  mounted () {
    this.getOrderInfoDetail()
    this.getOrderDeliveryDetail()
    this.getReturnDetail()
    this.getReturnDetailInfo()
  },
  methods: {
    // 获取退回数据
    getReturnDetail () {
      let data = {
        id: this.id,
        page: this.returnPageList.curPage,
        pageSize: this.returnPageList.pageSize
      }
      this.returnLoading = true
      this.$axios({
        url: ocBsOperateItemList,
        method: 'post',
        data: {
          ...data
        }
      })
        .then(res => {
          if (Number(res.data.code) === 0) {
            this.returnData = res.data.payload.content || []
            this.ReturnBaseInfo = this.returnData.map(item => {
              return {
                operateReturnCode: item.operateReturnCode,
                createdAt: item.createdAt,
                operateReturnNum: item.operateReturnNum,
                operateReturnAmount: getFormatterPrice(item.operateReturnAmount)
              }
            })
            this.returnPageList.totalElements = res.data.payload.totalElements
          }
        })
        .catch(e => {})
        .finally(() => {
          this.returnLoading = false
        })
    },
    // 获取退回数据
    getReturnDetailInfo () {
      this.$axios.$post(returnOneInfo + `?id=${this.id}`).then(res => {
        if (Number(res.code) === 0) {
          this.returnDataInfo = res.payload || {}
          this.ReturnBaseInfo = {
            ...this.returnDataInfo
          }
        }
      })
    },
    // 页码更改
    reciveHandleSizeChange ($event) {
      this.reacivePageList.pageSize = $event
      this.getOrderDeliveryDetail()
    },
    // 切换不一样的页面,重置一切数据
    reciveHandleCurrentChange ($event) {
      this.reacivePageList.curPage = $event
      this.getOrderDeliveryDetail()
    },
    // 页码更改
    returnHandleSizeChange ($event) {
      this.returnPageList.pageSize = $event
      this.getReturnDetail()
    },
    // 切换不一样的页面,重置一切数据
    returnHandleCurrentChange ($event) {
      this.returnPageList.curPage = $event
      this.getReturnDetail()
    },
    // 订单信息
    getOrderInfoDetail () {
      this.tableLoading = true
      const postData = {
        id: this.id
      }
      this.$axios
        .$post(followOrderDetail + `?id=${this.id}`)
        .then(res => {
          if (Number(res.code) === 0) {
            this.topData = res.payload
            for (let key in this.topData) {
              if (!this.topData[key] && this.topData[key] !== 0) {
                this.topData[key] = `--`
                continue
              }
              if (key === 'orderStatus') {
                this.topData[key] = this.ORDER_STATUS[this.topData[key]]
              }
              if (key === 'sickSex') {
                this.topData[key] === 0
                  ? (this.topData[key] = '男')
                  : (this.topData[key] = '女')
              }
            }
          }
        })
        .catch(e => {})
        .finally(() => {
          this.tableLoading = false
        })
    },
    // 获取发货明细
    getOrderDeliveryDetail () {
      const type = 3 // 2寄售3跟台
      this.deliveryLoading = true
      this.$axios
        .$get(
          orderDeliveryDetail +
            `?id=${this.id}&type=${type}&page=${this.reacivePageList.curPage}&pageSize=${this.reacivePageList.pageSize}`
        )
        .then(res => {
          if (Number(res.code) === 0) {
            this.orderDeliveryData = res.payload || []
            this.DeliverGoodsBaseInfo = this.orderDeliveryData.map(item => {
              return {
                deliveryCode: item.deliveryCode,
                createdAt: item.createdAt,
                sendNumCount: item.sendNumCount,
                sumPrice: getFormatterPrice(item.sumPrice)
              }
            })
            this.reacivePageList.totalElements = this.orderDeliveryData[0].pageBean.totalElements
          }
        })
        .catch(e => {})
        .finally(() => {
          this.deliveryLoading = false
        })
    },
    handleSizeChange (size) {
      this.pageSize = size
      this.getReturnDetail()
    },
    handleCurrentChange (curPage) {
      this.curPage = curPage
      this.getReturnDetail()
    }
  }
}
</script>
<style lang="less">
.purchasing-purchase-operation-detail {
  height: 100%;
  // display: flex;

  .registercard-box {
    flex-direction: column;

    .el-form-item__label {
      width: 110px !important;
    }
    .price {
      color: red;
    }
    .pagination {
      padding-top: 10px;
      display: flex;
      justify-content: flex-end;
      padding-right: 0;
    }
  }
  .header-limit {
    .el-input__inner {
      width: 200px;
    }
    .el-date-editor {
      width: 368px;
    }
  }
}
</style>
